<!--  -->
<template>
  <div class="">
    <el-form ref="bookForm" :model="formData" label-width="90px" label-position="right">
      <el-card class="card-type">
        <div slot="header" class="clearfix">
          <span class="span">资产信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item
              v-if="title==='资产入账'"
              :rules="[{required: true, message: '请选择入账类型',trigger: 'change'}]"
              prop="typeGuid"
              label="入账类型"
            >
              <el-select
                style="width:100%"
                value-key="guid"
                v-model="formData.typeGuid"
                @change="selectChange"
              >
                <el-option
                  v-for="item in listType.childList"
                  :key="item.guid"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-else
              prop="typeGuid"
              :rules="[{ required: true, message: '请选择出账类型',trigger: 'change'}]"
              label="出账类型"
            >
              <el-select
                style="width:100%"
                value-key="guid"
                v-model="formData.typeGuid"
                @change="selectChange"
              >
                <el-option
                  v-for="item in listType.childList"
                  :key="item.guid"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="title==='资产入账'"
              prop="source"
              :rules="[{ required: true, message: '请输入来源方',trigger: 'change'}]"
              label="来源方"
            >
              <el-input v-model="formData.source"></el-input>
            </el-form-item>
            <el-form-item
              prop="destination"
              v-else
              :rules="[{ required: true, message: '请输入去处方',trigger: 'change'}]"
              label="去处方"
            >
              <el-input v-model="formData.destination"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="date"
              :rules="[{ required: true, message: '请选择日期',trigger: 'change'}]"
              label="日期"
            >
              <el-date-picker
                type="datetime"
                v-model="formData.date"
                value-format="timestamp"
                style="width:100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="金额"
              prop="money"
              :rules="[{ required: true, message: '请输入金额',trigger: 'change'}]"
            >
              <el-input v-model="formData.money"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="备注">
              <el-input v-model="formData.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card v-if="uploadVisible" class="card-type">
        <div slot="header" class="clearfix">
          <span>附件上传</span>
        </div>
        <upload-file
          @required="uploadRequire"
          :selectionGuid="selectionGuid"
          :selectMenu="selectMenu"
        ></upload-file>
      </el-card>
      <el-form-item>
        <el-button @click="close" style="float:right">取消</el-button>
        <el-button
          style="float:right;margin-right:10px;"
          type="primary"
          @click="title==='资产入账'?onSubmit(1):onSubmit(2)"
        >立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import uploadFile from "@/views/upload/uploadFile";
import { roomIn, roomOut } from "@/api/table";
import { getFileMenu } from "@/api/upload";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { uploadFile },
  data() {
    //这里存放数据
    return {
      formData: {
        rooms: []
      },
      listType: {},
      selectMenu: {},
      uploadVisible: false,
      uploadRequired: []
    };
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    roomData: {
      type: Array,
      default: []
    },
    selectionGuid: {
      type: Array,
      default: []
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    title(val) {
      this.listType = {};
      this.fetchData();
    },
    selectionGuid(val) {
      console.log("selectionGuid", val);
      this.selectionGuid = val;
    },
    roomData(val) {
      this.roomData = val;
    }
  },
  //方法集合
  methods: {
    fetchData() {
      this.uploadVisible = false;
      const inGuid = "24fc93f570f447b5b0eca6fd0b9e89e7";
      const outGuid = "37538c55f7bb4895a3d24b739890f814";
      let data = {};
      this.formData = {}; //数据初始化
      if (this.title === "资产入账") {
        data = {
          guid: inGuid,
          roomGuids: this.selectionGuid
        };
      } else {
        data = {
          guid: outGuid,
          roomGuids: this.selectionGuid
        };
      }
      getFileMenu(data).then(response => {
        if (response.code === 100) {
          this.listType = response.body;
        }
      });
    },
    uploadRequire(uploadRequired) {
      this.uploadRequired = uploadRequired;
      console.log("require", this.uploadRequired);
    },
    //入账出账提交按钮
    onSubmit(type) {
      this.$refs["bookForm"].validate(valid => {
        if (valid) {
          //必传图片已经上传
          if (this.uploadRequired.length === 0) {
            this.formData.typeGuid = this.formData.typeGuid.guid; //this.formData.typeGuid为选中类型的对象 此处需要传递里面的guid
            this.formData.rooms = this.roomData;
            this.formData.roomGuids = this.selectionGuid;
            if (type === 1) {
              //入账时
              roomIn(this.formData).then(repsonse => {
                this.$emit("closeDialog", false);
              });
              //出账时
            } else {
              roomOut(this.formData).then(repsonse => {
                this.$emit("closeDialog", false);
              });
            }
          } else {
            let msg = "";
            this.uploadRequired.forEach(item => {
              msg = msg + " " + item.name;
            });
            this.$message({
              message: "请上传下列文件" + msg,
              type: "info"
            });
          }
        }
      });
    },
    close() {
      this.$emit("closeDialog", false);
    },
    selectChange(val) {
      console.log("下拉框的值", val);
      this.selectMenu = val;
      this.uploadVisible = true;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.fetchData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("selectionGuid", this.selectionGuid);

    // this.formData.assetData = this.assetData;
    // console.log("xzxx" + this.assetData);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.card-type {
  // padding: 20px;
  padding-right: 15px;
  margin-bottom: 30px;
}
</style>